<template>
  <view class="ssguiz-container" >
    <!-- <rich-text :nodes="richTextContent" class="rich-text-content" /> -->
	<view class="btn-list" v-for="(item, index) in groupList" :key="index">
	  <view class="btn-item btn-red" @click="onBtnClick(item)">
	    <image class="btn-icon" :src="item.thumb" mode="" />
	  </view>
	   
	</view>
  </view>

</template>

<script>
export default {
  data() {
    return {
      richTextContent: "",
      link_url: '',
	  groupList: []
    }
  },
  onLoad() {
    this.fetchNews();
  },
  methods: {
	  onBtnClick(item) {
	    console.log('-----------2-----------',item.title)
	   window.open(item.link_url)
	  },
       handleMessage(e) {
        console.log('收到webview消息:', e.detail.data)
      },
    async fetchNews() {
      try {
        const res = await uni.request({
          url: 'http://chaoxiang.scoringchina.com/index/api/gonglve_new',
          method: 'GET'
        });
        if(res && res.data && res.data.code === 1) {
			this.groupList = res.data.data || [];
          this.richTextContent = res.data.data.content || "";
          this.link_url = res.data.data.link_url;
          // if(this.link_url) {
          //   window.open(this.link_url);
          //   uni.navigateBack({
          //      delta: 1
          //   });
          // }

        } else {
          console.error('获取数据失败', res[1]);
        }
      } catch (error) {
        console.error('请求异常', error);
      }
    },
  
  }
}
</script>

<style scoped>
.ssguiz-container {
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 0;
}
.ssguiz-img {
  width: 100vw;
  display: block;
  margin: 0 auto;
}
.rich-text-content {
  width: 94vw;
  margin: 20rpx auto;
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
}
/* 富文本容器 */
.ssguiz-container ::v-deep p {
  text-align: center; /* 居中 */
  margin: 0;
  padding: 0;
}

.ssguiz-container ::v-deep img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

.btn-list {
  margin-top: 24rpx;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  padding: 0 24rpx;
}
.btn-item {
  min-height: 120rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
}
.btn-label {
  font-size: 38rpx;
  color: #fff;
  font-weight: bold;
  letter-spacing: 2rpx;
}
.btn-icon {
  width: 704rpx;
  height: 291rpx;
}
</style>